<template lang="pug">
.part-select
  mt-dialog(
    v-model="model"
    cancel-text="取消"
    size="large"
    :title="tileName"
    v-bind:onCancel="onCancel"
    v-bind:onConfirm="onConfirm"
    v-bind:onClose="onClose"
    :fullscreen="true"
  )
    editor(ref="foEditor")

   
</template>

<script setup lang="ts">
import { useNotify, editor } from "@scmt/common-components";
import { useApi } from "@scmt/core-api";
const foEditor = ref<InstanceType<typeof editor>>();
const $api = useApi();
const $notify = useNotify();

//foEditor 的defaultValue
const jsonValue = ref<string>("");
//添加 Props属性
const props = defineProps({
  selectItem: Object,
});
// 调用defineEmits方法 并接受父组件给绑定的事件
const emit = defineEmits(["handeSelect"]);

const model = defineModel({
  default: false,
});
//弹框标题
const tileName = ref<null | String>("模板预览");

//弹框点击确认事件
const onConfirm = () => {
  if (props.selectItem) {
    props.selectItem.jsonTemplate = foEditor?.value?.getJson();
    const saveItem = $api.bdm.template.$$createEntity(props.selectItem);
    $api.bdm.template.save(saveItem).then(() => {
      $notify.success("保存模板成功");
      //传递给父组件
      emit("handeSelect");
      model.value = false;
    });
  }
};
//关闭弹框
const onCancel = () => {
  model.value = false;
};
//取消
const onClose = () => {
  model.value = false;
};
watch(
  model,
  () => {
    if (model.value) {
      jsonValue.value = props.selectItem?.jsonTemplate;
      foEditor.value?.destroy();
      nextTick(() => {
        if (!jsonValue.value) {
          foEditor.value?.initEditor("setting", "", null);
        } else {
          foEditor.value?.initEditor(
            "setting",
            JSON.parse(jsonValue.value),
            null
          );
        }
      });
    }
  },
  {
    immediate: true,
  }
);
</script>

<style lang="less" scoped>
.part-select {
  .fo-editor {
    min-width: 980px;
    min-height: 600px;
  }

  :deep(.mt-dialog__modal) {
    height: 100vh !important;
  }
}
</style>
